<template>
  <div>
    <div class="tit">雷达楼层分布情况</div>
    <div class="charts" ref="chart"></div>
  </div>
</template>

<script>
export default {
  name: "radar-echart",
  description: "雷达统计图",
  data(){
    return{
      options: {
        grid: {
          right: "23%",
          left: "40%",
        },
        tooltip: {
          confine: false,
          trigger: "item",
          backgroundColor: "#000000",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          padding: 5,
          position: "top",
          formatter: "{c}",
        },
        xAxis: {
          type: "value",
          name: "数量（个）",
          nameTextStyle: {
            color: "#666666",
            fontFamily: "HarmonyOS Sans SC",
            fontSize: 12,
          },
          axisLabel: {
            show: true,
            margin: 15,
            textStyle: {
              color: "#666666",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.08)",
            },
            show: true,
          }
        },
        yAxis: [
          {
            name: "位置",
            nameTextStyle: {
              color: "#666666",
              fontFamily: "HarmonyOS Sans SC",
              fontSize: 12,
            },
            type: "category",
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: "#666666",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0, 0, 0, 0.08)",
              },
              show: true,
            },
            data: [],
          },
        ],
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                shadowBlur: 0,
                color: "rgba(40, 113, 254, 1)",
                barBorderRadius: [0,2,2,0]
              },
            },
            barWidth: 12,
            data: [],
          },
        ],
        dataZoom : [
          {
            id: 'dataZoomY',
            yAxisIndex: [0],
            show: true, //是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 12, // 一次性展示5个
            width: 6,
            borderColor: 'transparent',
            fillerColor: 'rgba(205,205,205,1)',
            zoomLock: true,
            showDataShadow: false, //是否显示数据阴影 默认auto
            backgroundColor: '#fff',
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
            filterMode: 'filter',
            handleIcon: 'circle',
            handleStyle: {
              color: 'rgba(205,205,205,1)',
              borderColor: 'rgba(205,205,205,1)',
            },
            handleSize: '80%',
            moveHandleSize: 0,
            maxValueSpan: 12,
            minValueSpan: 4,
            brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
          }, {
            type: 'inside',
            yAxisIndex: 0,
            zoomOnMouseWheel: false,  //滚轮是否触发缩放
            moveOnMouseMove: true,  //鼠标滚轮触发滚动
            moveOnMouseWheel: true
          }]
      }
    }
  },
  methods:{

  }
}
</script>

<style lang="less" scoped>
.tit {
  border-left: 4px solid #2871fe;
  padding-left: 8px;
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  margin-bottom: 28px;
}
.charts {
  height: 690px;
  flex: 1;
  border: 1px solid gainsboro;
}
</style>
